<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/css/style.css">
    <style>
        .waaibiankuang {
            position: absolute;
            top: 0%;
            left: 0%;
            display: none;
            background: rgba(0, 0, 0, 0.3);
            width: 100%;
            height: 100%;
            position: fixed;
            z-index: 9999
        }

        .neibiankuang {
            position: absolute;
            left: 35%;
            border-radius: 8px;
            width: 20%;
            background-color: #fff;
        }

        .banner_e_x .dlzc ul li a {
            line-height: 100px;
            display: block;
            padding: 0 8px;
            font-size: 12px;
            font-family: Times New Roman;
            color: #777;
        }

        .banner_e_x .dlzc ul li {
            float: left;
            font-size: 12px;
            line-height: 100px
        }

        .pay {
            cursor: pointer;
            float: left;
            margin-top: 2%;
            margin-left: 5%;
            border: 1px solid #ccc;
        }

        .pay:hover {
            border: 1px solid red;
        }

    </style>
</head>
<body>
<div style="margin: 0 auto; width: 1226px;">
    <@common.cart_head/>
    <div style="background-color: #f5f5f5; height: 700px; position: relative; border-top: 2px solid red;">

        <div style="background-color: #FFF; width: 1222px; position: absolute;margin-top: 2.5%;margin-left: 145px;">
            <div style="margin: 4% 4% 0 4%;height: 37%;float: left;width: 11%;" class="goods-img"><img
                    src="../../image/success.png" style=" width:130px; height:130px;"></div>
            <div style="float:left;">
                <div style=" margin-top: 6%; width: 80%">
                    <h2 style="margin-bottom: 10px;font-size: 24px;font-weight: normal;line-height: 36px;">订单提交成功！
                        去付款咯～</h2>
                    <input id="orderNo" type="hidden" value="${orderNo?c} ">
                    <p id="J_deliverDesc"></p>
                    <p>请在 <span id="time" style=" color: red;">30:00</span>
                        </span>内完成支付, 超时后将取消订单</p>
                </div>
                <div style=" margin: 5% 0 5% 0;   color: #616161; transition: height .3s ease;">收货信息：
                    <span class="content">
            ${shipping.receiverName} ${shipping.receiverPhone?c}&nbsp;&nbsp;
            ${shipping.provinceName}&nbsp;&nbsp;${shipping.cityName}&nbsp;&nbsp;${shipping.distractName}&nbsp;&nbsp;${shipping.receiverAddress} </span>
                </div>
            </div>

            <div style="float: right; margin: 4% 6% 0 0; >
            <p style=" color: #757575;
            "> 应付总额：<span style="color: #ff6700; font-size: 22px;">${totalPrice?c}元</span>
            </p>
        </div>

        <div style="width: 100%;background-color: #FFF;height: 280px;position: absolute;margin-top: 20%;">
            <div style=" margin-top: 2%;    margin-left: 5%;   height: 50px; margin-bottom: 30px; border-bottom: 1px solid #e0e0e0; font-size: 18px;">
                选择以下支付方式付款
            </div>

            <div style="margin-left: 5%; ">
                <h3 style="font-size: 16px; color: #616161">支付平台</h3>
                <h3 style="font-size: 16px; color: #616161">应付总金额：
                    <span style="color: #ff6700; font-size: 19px;">${totalPrice?c}元</span>
                </h3>
            </div>
            <ul>
            <#--<li><img style=" float: left; margin-top: 2%; margin-left: 5%;   border: 1px solid red;" src="../../image/weixinpay.png"></li>-->
                <li id="alipay"><img class="pay" src="../../image/event-alipay20160718.jpg"></li>
            </ul>

        </div>

    </div>
<#--添加版本-->
    <div id="">
        <div id="addVersion_2" class="bg-model waaibiankuang">
            <div style="margin-top: 10%;height: 290px" class='content neibiankuang'>
                <div style=" width: 280px; display: flex;align-items: flex-start;justify-content: space-between;padding: 1rem;border-bottom: 1px solid #e9ecef;border-top-left-radius: .3rem;border-top-right-radius: .3rem;">
                    <img style=" margin: 0 auto;" id="alipayImg" src="" alt="支付码">
                </div>

                　　
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src='/js/jquery-3.3.1.js'></script>
<script type="application/javascript">

    $(document).ready(function () {
        var i=0; //声明轮询次数变量
        var orderNo = $("#orderNo").val();
        //单纯分钟和秒倒计时
        var m = 29;
        var s = 59;
        setInterval(function () {
            if (s < 10) {
                $('#time').html(m + ':0' + s);
            } else {
                $('#time').html(m + ':' + s);
            }
            s--;
            if (s < 0) {
                s = 59;
                m--;
            }
        }, 1000);

        // 调用支付宝接口
        $("#alipay").click(function () {
            $("#addVersion_2").fadeTo(300, 1)
            //隐藏窗体的滚动条
            $("body").css({"overflow": "hidden"});
            $.ajax({
                url: '/pay/alipay?orderNo=' + orderNo,
                success: function (result) {
                    if (result.status == -100) {
                        window.location.href = "/user/page/login";
                        return false;
                    }
                    $("#alipayImg").attr('src', result.data.qrUrl);
                }
            });
            c = window.setInterval("getResult()",1000); //间隔多少秒去触发ajax
        });


    });

    // 轮询查询订单状态
    function getResult() {
        var i = 0;
        var orderNo = $("#orderNo").val();
        $.ajax({
            url: '/order/getOrderStatus?orderNo=' + orderNo,
            dataType: 'json',
            async: true,
            success: function (json) {
                console.log(json);
                i++; //记录轮询的次数  
                if (json.data == 1) { //处理自己的业务
                    window.location.href = '/page/index';
                    return false;
                }
                //设置轮询了多少次停止轮询
                if (i > 6) {
                    window.clearInterval(c);
                    return ;
                }
            }
        });
    }


</script>
</body>
</html>